<template>
	<view class="wineStorage">
		<n-loading></n-loading>
		<view class="pd32">
			<!-- 高粱穗 -->
			<view class="sorghumEar">
				<!-- 存酒规则btn -->
				<view class="wineSRules" @click="wineSRules">存酒规则</view>
				<!-- 添加酒卡btn -->
				<view class="addCard" @tap="chooseWinecard">添加酒卡</view>
				<!-- 现有高粱穗 -->
				<view class="sorghumEarHas">
					<view class="hasBox">
						<view class="img">
							<image src="https://lovebirdopen.com/static/img/cBj/sorghumEar.png" mode=""></image>
						</view>
						<view class="hasEar">
							<view class="tit mb8">现有高粱穗</view>
							<view class="val">{{existingCoin}}</view>
						</view>
					</view>
				</view>
				<!-- 高粱穗分布 -->
				<view class="earCenter">
					<view class="anchorPoint">
						<view class="earDistribute" 
						:class="{earDistributeBj2:(receiveDay-dateDiff(item.created_at))<0,earDistribute1:index==0,earDistribute2:index==1,earDistribute3:index==2,earDistribute4:index==3,
						swimGo1:index==0,swimGo2:index==1,swimGo3:index==2,swimGo4:index==3,disappearGo:collect==index}" 
						v-for="(item,index) of showCoins" :key="index" @tap="collectGo(index,item.id)">
							<image class="ears" src="https://lovebirdopen.com/static/img/cBj/ears.svg" mode=""></image>
							<view class="info">
								<view class="num">+{{item.num}}</view>
								<view class="time" v-if="(receiveDay-dateDiff(item.created_at))<0">
									<u-count-down :timestamp="effectiveTime-dateDiff(item.created_at)" :show-days="false" bg-color="transparent" color="#FF8A1E" separator-color="#FF8A1E" separator-size="20" font-size="20"></u-count-down>
								</view>
								<view class="time" v-if="(receiveDay-dateDiff(item.created_at))>0">
									<u-count-down :timestamp="receiveDay-dateDiff(item.created_at)" :show-days="false" bg-color="transparent" color="#FAEF4C" separator-color="#FAEF4C" separator-size="20" font-size="20"></u-count-down>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 个人信息 -->
			<view class="personalInfo">
				<view class="top" v-if="userInfo">
					<view class="personal">
						<image class="headImg" :src="userInfo.userInfo.avatar" mode=""></image>
						<text>{{userInfo.userInfo.nickname}}</text>
						<image class="vipLevel" :src="vipIcon[userInfo.vip]" mode=""></image>
					</view>
					<view class="goldCoinTit">
						<image class="goldCoinTitIcon" src="https://lovebirdopen.com/static/img/svgIcon/sEarIcon.svg" mode=""></image>
						<view class="tit">累计高粱穗</view>
						<view class="goldCoinDetails" @tap="spikeDetails">高粱穗明细</view>
					</view>
					<view class="details">
						<text class="num">{{totalCoin}}</text>
						<text class="label">您{{coins.length>0?'有':'没有'}}高粱穗{{coins.length>0?'待':'可'}}领取</text>
					</view>
				</view>
				<view class="bottom">
					<view class="item itemRBS">
						<view class="tit">本月高粱穗</view>
						<view class="specific">+{{monthCoin}} <text class="color1">上周+{{weekAddCoin}}</text></view>
					</view>
					<view class="item">
						<view class="tit">本月消耗</view>
						<view class="specific">-{{monthConsumeCoin}} <text class="color2">昨日-{{yesterdayConsumeCoin}}</text></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 存酒列表 -->
		<view class="wineStorageList">
			<view class="pd32" v-if="card.length==0">
				<view class="wineStorageNo">
					<view class="text">当前没有存酒</view>
					<view class="text">添加存酒领取高粱穗</view>
					<view class="wineSBtn" @tap="chooseWinecard">立即存酒</view>
				</view>
			</view>
			
			<view class="listBox" v-if="card.length!=0">
				<swiper class="swiper" previous-margin="32rpx" next-margin="32rpx" current="0">
					<!-- v-for -->
					<swiper-item class="swiper-item-box" v-for="(item,index) of card" :key="index">
						<view class="swiper-item">
							<!-- top -->
							<view class="frozen">
								<view class="days">酒卡冻结{{item.effective_days}}天</view>
								<view class="profitTimes">已领取{{item.cycles}}次收益</view>
							</view>
							<!-- 酒卡 -->
							<view class="cardBox">
								<view class="liquorCardEach">
									<image class="liquorCardEachBj" :src="(item.specs).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/cardStrategy/popCardAll500.png':'https://lovebirdopen.com/static/img/cardStrategy/popCardAll125.png'"></image>
									<view class="liquorCardEachCont2">
										<view class="worth" :class="{worthColor1:(item.specs).indexOf('500')!=-1,worthColor2:(item.specs).indexOf('125')!=-1}">
											价值￥{{item.orderItem.price}}
										</view>
										
										<view class="cardTit" :class="{color1:(item.specs).indexOf('500')!=-1,color2:(item.specs).indexOf('125')!=-1}">{{item.goods.liquor_card_name}}</view>
										<!-- {{getdate(item.created_at,1)}} -->
										<view class="time mb56" :class="{color3:(item.specs).indexOf('500')!=-1,color4:(item.specs).indexOf('125')!=-1}">{{getdate(item.created_at,1)}}</view>
										<view class="time sTime" :class="{color3:(item.specs).indexOf('500')!=-1,color4:(item.specs).indexOf('125')!=-1}">
											<view class="info ellipsis">{{item.name}}</view><text>×{{item.num}}</text>
										</view>
										<view class="cardHandle">
											<view class="handleEach" @tap="storageCancelOk(item.id)" :class="{handleEach2:(item.specs).indexOf('125')!=-1}">取消冻结</view>
										</view>
									</view>
								</view>
							</view>
							<!-- bottom -->
							<view class="profit">
								<view class="detailed">酒卡预估收益<text>{{item.revenue}}高粱穗</text></view>
								<view class="nextTime">下次领取收益时间<text>{{getdate(item.next_time,0)}}</text></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 提示 -->
		<u-modal v-model="confirmCancelShow" content="取消冻结状态，其当周生产的高粱穗清零，且该酒卡无法再次冻结产生高粱穗" @confirm="storageCancel" :show-cancel-button="true" title="提示"></u-modal>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				// 待领取高粱穗
				coins:[],
				showCoins:[],
				// 待成熟和待收取倒计时
				receiveDay:null,
				effectiveTime:null,
				collect:-1,
				// 现有高粱穗
				existingCoin:0,
				// 用户信息
				userInfo:null,
				vipIcon:[
					'https://lovebirdopen.com/static/img/grade/SilverV0.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV1.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV2.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV3.svg',
					'https://lovebirdopen.com/static/img/grade/goldV1.svg',
					'https://lovebirdopen.com/static/img/grade/goldV2.svg',
					'https://lovebirdopen.com/static/img/grade/goldV3.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV1.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV2.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV3.svg',
					'https://lovebirdopen.com/static/img/grade/supremeV7.svg',
				],
				// 累计高粱穗
				totalCoin:0,
				// 本月增高粱穗
				monthCoin:0,
				// 上周增高粱穗
				weekAddCoin:0,
				// 本月消耗高粱穗
				monthConsumeCoin:0,
				// 昨日消耗高粱穗
				yesterdayConsumeCoin:0,
				// 存酒的酒卡
				card:[],
				confirmCancelShow:false,
				cancelId:null,
			}
		},
		onShow: function (option) {
			var _this = this;
			uni.getStorage({
			    key: 'okChoose',
			    success: res => {
					uni.removeStorage({
					    key: 'okChoose'
					});
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '已存酒',
						success: res => {
							uni.setStorage({
							    key: 'ndy',
							    data: '1',
							    success: function () {
							        
							    }
							});
							setTimeout(function (){
								_this.getStorageLiquor();
							}, 1000);
						},
					});
			    }
			});
		},
		onLoad:function(){
			this.getStorageLiquor();
		},
		methods:{
			getStorageLiquor() {
				this.apiget('/mall/storage-liquor/index', {}).then(res => {
					if (res.data.status == 200) {
						this.coins = res.data.data.coins;
						
						if(this.coins.length>4){
							this.showCoins = this.coins.slice(0,4);
						}else{
							this.showCoins = this.coins;
						}
						this.receiveDay =  res.data.data.receive_day;
						this.effectiveTime = res.data.data.effective_time;
						this.existingCoin = res.data.data.user.gold_coin;
						this.userInfo = res.data.data.user;
						this.totalCoin = res.data.data.total_coin;
						this.monthCoin = res.data.data.this_month_coin;
						this.weekAddCoin = res.data.data.last_week_coin;
						this.monthConsumeCoin = res.data.data.this_month_consume;
						this.yesterdayConsumeCoin = res.data.data.yesterday_consume;
						this.coins = res.data.data.coins;
						this.coins = res.data.data.coins;
						this.card = res.data.data.card;
					}
				})
			},
			// 收取高粱穗
			collectGo(index,id){
				var _this = this;
				this.apipost('/mall/storage-liquor/collect', {id:id}).then(res => {
					if (res.data.status == 200) {
						_this.collect = index;
						setTimeout(function (){
							_this.showCoins.splice(index, 1)
							_this.collect = -1;
							_this.getStorageLiquor();
						}, 1500);
					}
				})
			},
			// 存酒规则
			wineSRules(){
				uni.navigateTo({
					url: './wineStorageRules'
				});
			},
			// 高粱穗明细
			spikeDetails(){
				uni.navigateTo({
					url: '/pages/scanCode/spikeDetails'
				});
			},
			// 选择酒卡存酒
			chooseWinecard(){
				uni.navigateTo({
					url: './chooseWinecard',
				});
			},
			// 取消冻结
			storageCancelOk(id){
				this.cancelId = id;
				this.confirmCancelShow = true;
			},
			storageCancel(){
				var _this = this;
				this.apipost('/mall/storage-liquor/storage-cancel', {id:this.cancelId}).then(res => {
					if (res.data.status == 200) {
						uni.showToast({
							icon: 'none',
							duration:1000,
							title: '已取消',
							success: res => {
								setTimeout(function (){
									_this.getStorageLiquor();
								}, 1000);
							},
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.wineStorage{
		min-height: 100%;
		background-image: url('https://lovebirdopen.com/static/img/cBj/wineStorageBj.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #F8F8FA;
	}
	
	.pd32{
		padding: 0 32rpx;
	}
	
	.sorghumEar{
		position: relative;
		height: 380rpx;
		
		// 麦穗分布
		.earCenter{
			position: absolute;
			bottom: 24rpx;
			left: 50%;
			width: 40rpx;
			height: 40rpx;
			margin-left: -20rpx;
			
			.anchorPoint{
				position: relative;
				width: 100%;
				height: 100%;
				// background-color: pink;
				
				.earDistribute{
					position: absolute;
					
					display: flex;
					width: 186rpx;
					height: 98rpx;
					padding-left: 16rpx;
					align-items: center;
					background: rgba(0, 0, 0, 0.24);
					border-radius: 76rpx;
					
					.ears{
						width: 28rpx;
						height: 66rpx;
					}
					.info{
						flex: 1;
						width: 1px;
						padding-left: 16rpx;
						
						.num{
							margin-bottom: 8rpx;
							font-size: 32rpx;
							line-height: 32rpx;
							color: #fff;
						}
						.time{
							font-size: 20rpx;
							line-height: 16rpx;
							color: #FAEF4C;
						}
					}
				}
				.earDistributeBj2{
					background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #FFEEB0 100%);
					box-shadow: 0px 0px 24rpx rgba(211, 175, 81, 0.6);
					.info{
						.num{
							color: #FF8A1E;
						}
					}
				}
				
				.earDistribute1{
					top: -150rpx;
					left: -260rpx;
				}
				.earDistribute2{
					top: -255rpx;
					left: 40rpx;
				}
				.earDistribute3{
					top: -275rpx;
					left: -157rpx;
				}
				.earDistribute4{
					top: -135rpx;
					left: 150rpx;
				}
			}
		}
		
		.wineSRules{
			position: absolute;
			top: 16rpx;
			right: 0;
			z-index: 9;
			width: 144rpx;
			height: 52rpx;
			font-size: 28rpx;
			line-height: 52rpx;
			text-align: center;
			color: #FFFFFF;
			background: rgba(0, 0, 0, 0.12);
			border-radius: 46rpx;
		}		
		.addCard{
			position: absolute;
			bottom: 16rpx;
			left: 0;
			width: 160rpx;
			height: 56rpx;
			font-size: 24rpx;
			line-height: 56rpx;
			text-align: center;
			color: #FFFFFF;
			background: rgba(198, 26, 0, 0.3);
			border-radius: 42rpx;
		}
		
		.sorghumEarHas{
			position: absolute;
			bottom: 4rpx;
			left: 50%;
			width: 222rpx;
			height: 84rpx;
			margin-left: -111rpx;
			
			.hasBox{
				position: relative;
				width: 100%;
				height: 100%;
				padding: 4rpx 0;
				
				.img{
					position: absolute;
					left: 0;
					top: 0;
					width: 84rpx;
					height: 84rpx;
					padding: 4rpx;
					background: #FF8A1E;
					border-radius: 42rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				.hasEar{
					height: 100%;
					padding-left: 82rpx;
					padding-top: 6rpx;
					padding-right: 18rpx;
					color: #FFF;
					text-align: center;
					background: #FF8A1E;
					border-radius: 56rpx;
					
					.tit{
						font-size: 20rpx;
						line-height: 20rpx;
					}
					.val{
						font-size: 36rpx;
						line-height: 36rpx;
					}
					.mb8{
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}
	
	.personalInfo{
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
		overflow: hidden;
		
		.top{
			height: 264rpx;
			padding: 8rpx 24rpx 16rpx;
			background: url('https://lovebirdopen.com/static/img/cBj/goldCoinBj.png') no-repeat right bottom;
			background-size: 332rpx 228rpx;
			
			.personal{
				display: flex;
				padding: 18rpx 0;
				align-items: center;
				box-shadow: inset 0px -0.5px 0px #F5F5F5;
				
				.headImg{
					width: 60rpx;
					height: 60rpx;
					margin-right: 24rpx;
					border-radius: 50%;
				}
				text{
					margin-right: 8rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333333;
				}
				.vipLevel{
					width: 92rpx;
					height: 40rpx;
				}
			}
			
			.goldCoinTit{
				padding: 24rpx 0 8rpx;
				display: flex;
				align-items: center;
				
				.goldCoinTitIcon{
					width: 16rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
				
				.tit{
					flex: 1;
					width: 1px;
					font-size: 28rpx;
					color: #999999;
				}
				
				.goldCoinDetails{
					width: 160rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					border: 2rpx solid #E8E8E8;
					border-radius: 60px;
				}
				
			}
			
			.details{
				display: flex;
				align-items: center;
				
				.num{
					font-size: 64rpx;
					line-height: 64rpx;
					color: #333333;
					font-weight: bold;
				}
				.label{
					display: inline-block;
					height: 44rpx;
					padding: 0 24rpx;
					margin-left: 8rpx;
					font-size: 20rpx;
					line-height: 44rpx;
					color: #A27D4B;
					background: rgba(242, 224, 189, 0.5);
					border-radius: 0px 22rpx 22rpx 22rpx;
				}
			}
		}
		
		.bottom{
			display: flex;
			height: 120rpx;
			padding: 24rpx 0 20rpx;
			background: #FCFCFC;
			
			.item{
				flex:1;
				height: 100%;
				padding: 0 24rpx;
				
				.tit{
					font-size: 24rpx;
					line-height: 24rpx;
					color: #999999;
				}
				
				.specific{
					font-weight: bold;
					font-size: 32rpx;
					line-height: 52rpx;
					color: #333333;
					
					text{
						margin-left: 8rpx;
						font-size: 24rpx;
					}
					
					.color1{
						color: #FF5238;
					}
					.color2{
						color: #0DB43B;
					}
				}
			}
			.itemRBS{
				box-shadow: 0.5px 0px 0px #EEEFF3;
			}
		}
	}
	
	.wineStorageList{
		padding-top: 24rpx;
		padding-bottom: 80rpx;
		
		.wineStorageNo{
			height: 596rpx;
			padding-top: 44rpx;
			text-align: center;
			background: url('https://lovebirdopen.com/static/img/cBj/wineStorageNo.png') no-repeat;
			background-size: 100% 100%;
			
			.text{
				font-size: 28rpx;
				line-height: 44rpx;
				color: #FFFFFF;
			}
			.wineSBtn{
				display: inline-block;
				width: 192rpx;
				margin-top: 24rpx;
				padding: 16rpx 0;
				font-size: 32rpx;
				line-height: 36rpx;
				color: #FF5238;
				background: #FFFFFF;
				border-radius: 42rpx;
			}
		}
		
		.listBox{
			height: 564rpx;
			
			.swiper{
				height: 100%;
				
				.swiper-item-box{
					padding-right: 16rpx;
					box-sizing: border-box;
					
					.swiper-item{
						height: 100%;
						padding-top: 24rpx;
						background-color: #fff;
						border-radius: 16rpx;
						box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
						
						.frozen{
							height: 44rpx;
							line-height: 44rpx;
							
							.days{
								display: inline-block;
								padding: 0 24rpx 0 38rpx;
								margin-right: 8rpx;
								font-size: 24rpx;
								color: #fff;
								background: linear-gradient(264.11deg, #B08228 9.33%, #D8B879 94.67%);
								border-radius: 0px 8rpx 8rpx 0px;
							}
							.profitTimes{
								display: inline-block;
								padding: 0 24rpx;
								font-size: 20rpx;
								color: #FF5238;
								background: rgba(255, 82, 56, 0.12);
								border-radius: 0px 22rpx 22rpx 22rpx;
							}
						}
						
						.cardBox{
							padding: 16rpx 24rpx;
							
							.liquorCardEach{
								position: relative;
								width: 100%;
								background-color: #fff;
								box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.04);
								border-radius: 8rpx;
								overflow: hidden;
								
								.liquorCardEachBj{
									position: absolute;
									top: 0;
									left: 0;
									z-index: 1;
									width: 100%;
									height: 100%;
									border-radius: 16rpx;
								}
								
								
								.liquorCardEachCont2{
									height: 352rpx;
									padding: 40rpx 40rpx 0;
									overflow: hidden;
									position: relative;
									z-index: 2;
												
									.worth{
										position: absolute;
										right: 0;
										top: 0;
										width: 356rpx;
										height: 57rpx;
										padding-left: 45rpx;
										font-size: 24rpx;
										line-height: 57rpx;
										text-align: center;
									}
									.worthColor1{
										color: #755F3C;
										
										text{
											margin-left: 8rpx;
											color: rgba(117, 95, 60, 0.7);
										}
									}
									.worthColor2{
										color: #FFE6A6;
										
										text{
											margin-left: 8rpx;
											color: rgba(255, 230, 166, 0.7);
										}
									}
									
									.cardTit{
										height: 52rpx;
										font-size: 36rpx;
										line-height: 52rpx;
									}
									.time{
										width: 70%;
										// margin-bottom: 56rpx;
										font-size: 24rpx;
										line-height: 40rpx;
									}
									.sTime{
										display: flex;
										
										.info{
											flex: 1;
											width: 1px;
										}
										text{
											margin-left: 8rpx;
											opacity: 1;
										}
									}
									.mb56{
										margin-bottom: 56rpx;
									}
									
									.cardHandle{
										margin-top: 44rpx;
										text-align: right;
										
										.handleEach{
											display: inline-block;
											width: 144rpx;
											height: 52rpx;
											line-height: 52rpx;
											font-size: 24rpx;
											text-align: center;
											color: #755F3C;
											background: #161616;
											border: 2rpx solid #755F3C;
											border-radius: 56rpx;
										}
										.handleEach2{
											color: #FFE6A6;
											background: #CC922D;
											border: 2rpx solid #FFE6A6;
										}
									}
									.color1{
										color: #EAC181;
									}
									.color2{
										color: #B97300;
									}
									.color3{
										color: rgba(234, 193, 129, 0.7);
									}
									.color4{
										color: rgba(185, 115, 0, 0.7);
									}
								}
							}
						}
						
						.profit{
							padding: 0 24rpx;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #999999;
							
							.detailed{
								text{
									float: right;
									color: #FBB11B;
								}
							}
							.nextTime{
								text{
									float: right;
									color: #333333;
								}
							}
						}
					}
				}
			}
		}
	}
	
	// 动画
	// 上下浮动
	.swimGo1 {
		animation: 1.4s swim 0s infinite;
		-webkit-animation: 1.4s swim 0s infinite;
		-moz-animation: 1.4s swim 0s infinite;
	}
	.swimGo2 {
		animation: 1.2s swim 0s infinite;
		-webkit-animation: 1.2s swim 0s infinite;
		-moz-animation: 1.2s swim 0s infinite;
	}
	.swimGo3 {
		animation: 1.55s swim 0s infinite;
		-webkit-animation: 1.55s swim 0s infinite;
		-moz-animation: 1.55s swim 0s infinite;
	}
	.swimGo4 {
		animation: 1.75s swim 0s infinite;
		-webkit-animation: 1.75s swim 0s infinite;
		-moz-animation: 1.75s swim 0s infinite;
	}
	// 消失
	.disappearGo{
		animation: 1.8s disappear 0s infinite;
		-webkit-animation: 1.8s disappear 0s infinite;
		-moz-animation: 1.8s disappear 0s infinite;
	}
	
	@keyframes swim {
		0% {
			transform: translateY(0);
		}
	
		50% {
			transform: translateY(calc(-5%));
		}
	
		100% {
			transform: translateY(0);
		}
	}
	
	@-webkit-keyframes swim {
		0% {
			transform: translateY(0);
		}
			
		50% {
			transform: translateY(calc(-5%));
		}
			
		100% {
			transform: translateY(0);
		}
	}
	
	@-moz-keyframes swim {
		0% {
			transform: translateY(0);
		}
			
		50% {
			transform: translateY(calc(-5%));
		}
			
		100% {
			transform: translateY(0);
		}
	}
	
	
	@keyframes disappear {
		100% {
			left: -80rpx;
			top: -49rpx;
			opacity: 0;
			transform: scale(0);
		}
	}
	
	
	
	
</style>
